<template>
  <div>
    <Editor
      api-key="n133eu74v03ixr08iihpj8i53zc79xm634lx5l25elbkfhs0"
      v-model="editValue"
      :init="setting"
    />
  </div>
</template>

<script>
import axios from 'axios';
import Editor from '@tinymce/tinymce-vue';
export default {
  components: { Editor },
  props: {
    height: { type: String, default: '400px' },
    value: { type: String, default: '' },
  },
  data() {
    return {
      editValue: '',
    };
  },
  computed: {
    setting() {
      return {
        plugins:
          'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap quickbars emoticons template',
        editimage_cors_hosts: ['picsum.photos'],
        menubar: 'file edit view insert format tools table help', // 菜单
        toolbar:
          'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | align numlist bullist | link image | table media | lineheight outdent indent| forecolor backcolor removeformat | charmap emoticons | code fullscreen preview | save print | pagebreak anchor codesample | ltr rtl', // 导航栏
        link_list: [
          // 配置链接列表
          { title: 'My page 1', value: 'https://www.tiny.cloud' },
          { title: 'My page 2', value: 'http://www.moxiecode.com' },
        ],
        autosave_ask_before_unload: true,
        autosave_interval: '30s',
        autosave_prefix: '{path}{query}-{id}-',
        autosave_restore_when_empty: false,
        autosave_retention: '2m',
        toolbar_mode: 'sliding',
        // quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable', // 配置快速工具栏
        noneditable_class: 'mceNonEditable',
        contextmenu: 'link image table',
        image_advtab: true,
        images_upload_url: process.env.VUE_APP_BASE_API + '/home/file/upload', // 图片上传的 URL
        images_upload_handler: function (blobInfo, success, failure) {
          this.handleImageUpload(blobInfo, success, failure);
        }.bind(this), // 处理图片上传的方法
        height: this.height,
      };
    },
  },
  watch: {
    value: {
      immediate: true,
      handler(v) {
        this.editValue = v;
        console.log(this.editValue, v, 'kk');
      },
    },
    //   editValue(v) {
    //     console.log(v);
    //   },
  },
  methods: {
    // 上传图片
    handleImageUpload(blobInfo, success, failure) {
      const data = new FormData();
      data.append('file', blobInfo.blob(), blobInfo.filename());
      console.log(data);
      axios({
        url: process.env.VUE_APP_BASE_API + '/home/file/upload',
        method: 'post',
        data,
      })
        .then((res) => {
          success(res.data.fileInfo.filePath);
        })
        .catch((err) => {
          failure(err);
        });
    },
  },
};
</script>
<style>
.tox-tinymce-aux {
  z-index: 99999 !important;
}
.tinymce.ui.FloatPanel {
  z-index: 99;
}
</style>
